<!-- innovaition -->
<section class="one-section one-innovaition-section wt pc-safeCol2 wap-safeCol2" data-title="innovaition">
  <div class="pc-safeRow wap-safeRow">
    <p class="one-h1 pc-ct wap-ct">{{ section.settings.title }}</p>
    <div class="one-innovaition-swiper showA">
      <div class="swiper-wrapper">
        {%- for block in section.blocks -%}
          <div class="swiper-slide ">
            <div class="one-innovaition-swiper-item bk">
              <picture class="one-wapHide one-innovaition-img">
                <img class="cover" src="{{ block.settings.desktop_image | img_url: "master" }}" loading="lazy">
              </picture>
              <picture class="one-wapOnly one-innovaition-img">
                <img class="cover" src="{{ block.settings.mobile_image | img_url: "master" }}" loading="lazy">
              </picture>

              {%- liquid
                case block.settings.desc_pos
                  when 'top_right'
                    assign desc_pos = 'one-innovaition-p3'
                  else
                    assign desc_pos = 'one-innovaition-p1'
                endcase
              %}

              <p class="one-innovaition-p2 one-h3 one-wapHide">{{ block.settings.title }}</p>
              <p class="{{ desc_pos }} one-b2">{{ block.settings.desc }}</p>
            </div>
          </div>
        {%- endfor -%}
      </div>
    </div>
    <div class="one-innovaition-btn-div one-pc-flexRow">
      <div class="one-innovaition-btn-list one-pc-flexRow one-wapHide">
        {%- for block in section.blocks -%}
          <div class="one-innovaition-btn {% if forloop.first %}active{% endif %}">
            <div class="one-innovaition-btn-bar"></div>
          </div>
        {%- endfor -%}
      </div>
      <div class="one-innovaition-pagebtn-list one-pc-flexRow one-wap-flexRow">
        <svg
          class="one-innovaition-pagebtn left"
          xmlns="http://www.w3.org/2000/svg"
          width="46"
          height="46"
          viewBox="0 0 46 46"
          fill="none"
        >
          <rect width="46" height="46" rx="23" fill="#0060EF" />
          <path d="M26.0273 14.5263L17.5537 22.9999L26.0273 31.4736" stroke="#fff"
              stroke-width="2.42105" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
        <svg
          class="one-innovaition-pagebtn right"
          xmlns="http://www.w3.org/2000/svg"
          width="46"
          height="46"
          viewBox="0 0 46 46"
          fill="none"
        >
          <rect width="46" height="46" rx="23" fill="#0060EF" />
          <path d="M26.0273 14.5263L17.5537 22.9999L26.0273 31.4736" stroke="#fff"
              stroke-width="2.42105" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
      </div>
    </div>
  </div>
</section>

{% schema %}
{
  "name": "innovaition",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Title"
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "Slide",
      "settings": [
        {
          "label": "Desktop image",
          "type": "image_picker",
          "id": "desktop_image"
        },
        {
          "label": "Mobile image",
          "type": "image_picker",
          "id": "mobile_image"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title"
        },
        {
          "type": "text",
          "id": "desc",
          "label": "Desc"
        },
        {
          "type": "select",
          "id": "desc_pos",
          "label": "Desc position",
          "options": [
            {
              "value": "bottom_left",
              "label": "Bottom left"
            },
            {
              "value": "top_right",
              "label": "Top right"
            }
          ],
          "default": "bottom_left"
        }
      ]
    }
  ]
}
{% endschema %}
